<template>
  <view class="container">
    <!-- 表单内容 -->
    <u-form class="form-content">
      <!-- 行政区划选择 -->
      <u-form-item label="行政区划" class="form-item" label-width="120">
        <u-input
          v-model="formData.region"
          placeholder="请选择行政区划"
          @click="changeOpenRegionPicker"
          class="custom-input"
        />
        <area-picker
          ref="regionPicker"
          :title="regiontitle"
          titleColor="#808080"
          titleFontSize="14px"
          cancelType="icon"
          cancelColor="#999999"
          cancleFontSize="28rpx"
          confirmColor="#2877FF"
          confirmFontSize="14px"
          confirmFontWeight="500"
          itemFontSize="14px"
          @onClose="closeRegionPicker"
          @onConfirm="confirmRegionPicker"
          :pickerList="listRegion"
        />
      </u-form-item>

      <!-- 业户名称输入 -->
      <u-form-item label="业户名称" class="form-item" label-width="120">
        <u-input
          v-model="formData.plateNumber"
          placeholder="请输入业户名称"
          class="custom-input"
        />
      </u-form-item>

      <!-- 道路运输证号输入 -->
      <u-form-item label="经营许可证号" class="form-item" label-width="120">
        <u-input
          v-model="formData.transportNumber"
          placeholder="请输入经营许可证号"
          class="custom-input"
        />
      </u-form-item>
    </u-form>

    <!-- 查询按钮 -->
    <view class="btn-container">
      <u-button @click="submitForm">立即查询</u-button>
    </view>
  </view>
</template>

<script>
import areaPicker from "@/components/area-picker/area-picker.vue";
import { changePlatecolor, vehiChangeProname } from "@/common/utils.js";
export default {
  components: {
    areaPicker,
  },
  data() {
    return {
      title: "选择车牌颜色",
      regiontitle: "选择行政区划",
      formData: {
        region: "", // 行政区划
        plateNumber: "", // 车牌号码
        plateColor: "", // 车牌颜色
        transportNumber: "", // 道路运输证号
      },
      listRegion: [], // 行政区划选择
      list: [], // 车牌颜色选择
    };
  },
  onLoad(options) {
    this.populateList(); // 在加载时填充数据
  },

  methods: {
    populateList() {
      const plateColors = ["蓝色", "黄色", "黑色", "白色", "绿色", "其他"];
      const vehiclePrefixes = [
        "",
        "京",
        "津",
        "冀",
        "晋",
        "蒙",
        "辽",
        "吉",
        "黑",
        "沪",
        "苏",
        "浙",
        "皖",
        "闽",
        "赣",
        "鲁",
        "豫",
        "鄂",
        "湘",
        "粤",
        "桂",
        "琼",
        "渝",
        "川",
        "贵",
        "云",
        "藏",
        "陕",
        "甘",
        "青",
        "宁",
        "新",
      ];
      this.list = plateColors.map((color) => ({
        value: changePlatecolor(color), // 直接调用颜色转换函数获取对应值
        label: color, // 直接调用函数获取对应名称
      }));

      this.listRegion = vehiclePrefixes.map((prefix) => ({
        value: prefix,
        label: vehiChangeProname(prefix), // 直接调用函数获取对应名称
      }));
    },

    // 打开车牌颜色选择器
    changeOpenCarColor() {
      this.$refs.carPicker._open();
    },
    // 打开行政区划选择器
    changeOpenRegionPicker() {
      this.$refs.regionPicker._open();
    },

    // 关闭选择器
    closeCarPicker() {
      this.$refs.carPicker._close();
    },
    closeRegionPicker() {
      this.$refs.regionPicker._close();
    },

    confirmCarPicker(checkedValue) {
      this.formData.plateColor = checkedValue;
    },

    confirmRegionPicker(checkedValue) {
      this.formData.region = checkedValue;
    },

    submitForm() {
      uni.navigateTo({
        url: "/pages/hub_ygzw/owner/ownerInfo",
      });
      return;
      if (!this.formData.plateNumber || !this.formData.transportNumber) {
        uni.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }
      // 提交表单逻辑
      console.log("查询提交", this.formData);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
  background-color: #f3f6fa;
  height: 100vh;
  box-sizing: border-box;
}

.form-content {
  background-color: #ffffff;
  padding: 0;
  /* 去掉 padding */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  padding: 0 10px;
  border-bottom: 1px solid #f1f1f1;
  /* 设置下边框 */
}

.custom-input {
  border: none;
  /* 去掉输入框的边框 */
  background-color: transparent;
  /* 使背景透明 */
}

.btn-container {
  margin-top: 30px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  right: 0;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  ::v-deep .u-button--info[data-v-461e713c] {
    width: 100%;
    background-color: #2877ff;
    color: #ffffff;
  }
}

.arrow-icon-groud {
  position: relative;
  flex: 1;

  .arrow-icon {
    position: absolute !important;
    right: 20px;
    top: 10px;
  }
}
</style>
